<template>
	<view class="content">
		<view class="content-top">
			<view class="content-top-title">
				<view class="content-top-title-left">资料填写</view>
			</view>
			
			<view class="content-item">
				<view class="address-item-input">{{userName}}</view>
				<!-- <input class="address-item-input" type="text" v-model="userName" placeholder="请填输入姓名"> -->
			</view>
			<view class="content-item">
				<view class="address-item-input">{{idCard}}</view>
			</view>
			<view class="content-item">
				<view class="address-item-input">{{userphone}}</view>
			</view>
			
			<view class="content-item">
				<view class="area-box-item">
					<view class="huishou-news-address-select-text">{{areaText}}</view>
				</view>
			</view>
			
			<view class="text-content">
				<view class="textarea-box">{{addressDetail}}</view>
			</view>
			
			<view class="content-item" style="border: none;">
				<view style="font-size: 16px;">工作头像</view>
				<view class="add-shiwu-img-box">
					<view class="uploadImg-box" v-for="(item,index) in imageArray" :key="index">
						<!-- <image @click="deleteImgFun" :data-index='index' class="delete-img" :src="delete_img" mode=""></image> -->
						<image class="uploadImg" :src="item" mode=""></image>
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="content-top" style="margin-top: 12px;margin-bottom: 180px;">
			<view style="font-size: 17px;margin-bottom: 25px;font-weight: bold;">上传本人身份证</view>
			<view class="content-idcard-box">
				<view class="content-idcard-item" data-type='idCard01'>
					<image class="content-idcard-item-img" v-show="idCardImgOne" :src="idCardImgOne" mode=""></image>
				</view>
				<view class="content-idcard-item" data-type='idCard02'>
					<image class="content-idcard-item-img" v-show="idCardImgTwo" :src="idCardImgTwo" mode=""></image>
				</view>
			</view>
			<view class="content-idcard-box" style="margin-top: 20px;">
				<view class="content-idcard-item"  data-type='idCard03'>
					<image class="content-idcard-item-img" v-show="idCardImgThree" :src="idCardImgThree" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn-box">
			
			<view class="liji-btn" @click="fanhui">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				dingweiIcon:baseUrl+'/uploads/static/image/recovery_address_add_icon_location@2x.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				delete_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_delete@2x.png',
				idCardImg01:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_01@2x.png',
				idCardImg02:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_02@2x.png',
				idCardImg03:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_03@2x.png',
				userName:'',
				areaText:'省/市/区',
				idCard:'',
				userphone:'',
				checkboxXy:false,//同意协议
				addressDetail:'',
				areaArray:[
					// [{name:'北京市',id:100}],
					// ['1','2'],
					// ['1','2','3']
				],
				oneArea:[], //省
				twoArea: [], //市
				threeArea: [], //区
				fourArea:[], //街道
				selectIndex:[],//选中的下标
				
				province_id:'',//省
				city_id:'',//市
				area_id:'',//区
				street_id:'',//街道
				addressDetail:'',//详细地址
				lng:'',//经度
				lat:'',//维度
				
				imageArray:[],//上传图片
				idCardImgOne:'',//正面身份证
				idCardImgTwo:'',//反面身份证
				idCardImgThree:'',//手持身份证
			}
		},
		onLoad(options){
			if(options.type == 'enit'){
				this.getRecyclerInfoFun()
			}
		},
		methods:{
			getRecyclerInfoFun(){
				http.getRecyclerInfo().then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						let data = res.data.data 
						this.userName = data.name
						this.idCard = data.idcard
						this.userphone = data.mobile
						this.areaText = data.city+'/'+data.street_name
						this.addressDetail = data.address
						this.imageArray = [data.head_image_url] 
						this.idCardImgOne = data.idcard_front_image
						this.idCardImgTwo = data.idcard_back_image
						this.idCardImgThree = data.idcard_hold_image
					}
				})
			},
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.content{width: 100%;min-height: 100vh;background-color: #F8F9FD;box-sizing: border-box;padding: 12px;font-family: 'PingFang Bold';}
	.content-top{width: 100%;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 20px;}
	.content-top-title{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-top-title-left{box-sizing: border-box;font-size: 17px;line-height: 17px;font-weight: bold;}
	.content-item{width: 100%;display: flex;flex-direction: row;margin-top: 15px;min-height: 54px;border-bottom: 1px solid #f6f6f6;align-items: center;}
	.address-item-input{width: 100%;height: 54px;font-size: 16px;line-height: 54px;}
	.area-box-item{width: 100%;height: 100%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.huishou-news-address-select-text{font-size: 14px;font-weight: bold;color: #333;line-height: 30px;}
	.huishou-weight-right-img{width: 16px;height: 16px;margin-left: 10px;}
	.text-content{
		width: 100%;
		box-sizing: border-box;
		padding: 20px 0;
		display: flex;flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #F6F6F6;
	}
	.textarea-box{
		width: 100%;
		font-size: 14px;
	}
	.dingwei-icon{
		width: 20px;
		height: 20px;
	}
	.add-shiwu-img-box{width: calc(100% - 70px);overflow: hidden;display: flex;flex-direction: row;justify-content: flex-end;}
	.add-shiwu-img{width: 69px;height: 69px;border-radius: 50%; border: 1px solid #e5e5e5;background: #f6f6f6;position: relative;}
	.add-shu{position: absolute;width: 3px;height: 35px;border-radius: 3px;background: #d8d8d8;top: 17.25px;left: 33px;}
	.add-heng{position: absolute;width: 35px;height: 3px;border-radius: 3px;background: #d8d8d8;top: 33px;left: 17.25px;}
	.uploadImg-box{width: 70px;height: 70px;position: relative;border: 1px solid #d8d8d8;border-radius: 50%;}
	.uploadImg{width: 100%;height: 100%;border-radius: 50%;}
	.delete-img{width: 20px;height: 20px;position: absolute;right: 0;top: 0;z-index: 10;background: rgba(0,0,0,0.8);}
	.content-idcard-box{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-idcard-item{width: calc((100% - 20px) / 2);height: 92px;}
	.content-idcard-item-tupian{width: 100%;height: 100%;position: relative;}
	.idcard-beijing{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;}
	.content-idcard-item-tupian text{position: absolute;bottom:15px;left:0;width: 100%;text-align: center;color: #00CB8B;font-size: 12px;z-index: 2;}
	.content-idcard-item-img{width: 100%;height: 100%;border-radius: 5px;}
	.bottom-btn-box{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 20; height: calc(100px + env(safe-area-inset-bottom) /2);background: #fff;box-sizing: border-box;padding: 10px 20px 0px 20px;border-top: 1px solid #e5e5e5;}
	.bottom-btn-box-left-xieyi{display: flex;flex-direction: row;align-items: center;font-size: 14px;margin-bottom: 10px;}
	.checkboxTip{transform:scale(0.6)}
	.liji-btn{width: 100%;height: 50px;text-align: center;line-height: 50px;color: #fff;border-radius: 5px;background: #00CB8B;}
</style>